//加载公共样式
require('../../assets/css/public.less')
//加载自己的样式
require('./cuorse.less');
//引入tabbar渲染函数
const renderTabbar = require('../../lib/tabbar/tabbar.js')
// 引入渲染navbar函数
const navbar = require('../../lib/navbar/navbar.js')
//获取axios工具函数
const request = require('../../lib/request/request.js')
// 服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

window.onload = () => {
    //渲染tabbar
    renderTabbar('run')
    //渲染navbar
    navbar('cuorse')

    function $(selector) {
        return document.querySelector(selector)
    }


    // 获取数据
    function getData() {
        request.get('/api/train/courseList')
            .then(res => {
                console.log(res);
                // 解构数据
                let { errno, data } = res.data
                // 判断
                if (errno === 0) {
                    // 渲染
                    render(data)
                }
            })
    }
    getData()

    // 渲染函数
    function render(data) {
        console.log(data[0]);
        // 最新课程数据
        let data1 = data[0]
        // 最新课程html片段
        let html1 = `
        <a href ='./cuorse-detal.html?id=${data1.courseId}' class="newCourseBox">
                <img class="newCourseImg" src="${API + data1.imgurl}" alt="">
                <div>
                    <p class="newCourseTit">${data1.name}</p>
                    <p class="newCourseMain">${data1.desc}</p>
                </div>
        </a>
        
        `
        // 渲染课程
        $('.newCourse').innerHTML = html1

        // 获取课程列表数据
        const data2 = data.filter((v, i) => i !== 0)
        // 课程html片段
        let html2 = `
            ${data2.map(v => {
            return `
                <a href='./cuorse-detal.html?id=${v.courseId - 2}' class="itemComm item1">
                <img class="courseImg" src="${API + v.imgurl}" alt="">
                <div class="courseText">
                    <p class="courseTit">${v.name}</p>
                    <p class="courseCont">${v.desc}</p>
                </div>
                </a>
                `
        }).join('')}
               
        `
        $('.course').innerHTML = html2
    }


}